前端 | 使用 webuploader 上传到七牛云存储简单例子

背景

在做应用时，考虑到应用的会产生很多图片，为了省劲，就选择了七牛云存储，使用云存储的好处大家都是有感的，但还是有一点点担心，如果使用的第三方云存储挂掉了，(=@__@=)，这是后话

前台使用的上传组件选择了webuploader，我设计的业务流程如下

前端图片上传到七牛，七牛返回图片的名称，然后前端把返回的数据填充到指定的表单中，然后再次提交到后台，保存到数据库中，路子大致是这样的

后台选择了 django-1.6.7, 至于为什么不用更高级的版本，或许是 south 用的太久了，太爽了，所以七牛的 SDK，选用了 python 版本的 SDK

环境版本依赖

• python: 2.7.6
• django: 1.6.7
• qiniu SDK： 7.0.4
• webuploader: 0.1.6

Token 生成

下面这段偷懒 粘贴过来的

在七牛云存储中，整个上传流程大体分为这样几步：

1. 业务服务器颁发上传凭证给客户端（终端用户）
2. 客户端凭借 上传凭证 上传文件到七牛
3. 在七牛获得完整数据后，发起一个 HTTP 请求回调到业务服务器
4. 业务服务器保存相关信息，并返回一些信息给七牛
5. 七牛原封不动地将这些信息转发给客户端（终端用户）

这里的上传凭证即为 Token, 在我的这个例子中，直接省去了第三步和第四步，如果需要走第三步和第四步，可以查看相应的文档

Token 生成业务代码

from qiniu import Auth

class AddView(TemplateView):
  template_name = 'xx.html'

  def get_context_data(self, **kwargs):
    q = Auth(access_key, secret_key)
    token = q.upload_token('xxx')
    context = super(AddView, self).get_context_data(**kwargs)
    context['token'] = token
    return context

这样就把 Token 传入到视图中，如果想图省事，可以把这段生成业务封装成一个中间件

webuploader 声明

 WebUploader.create({
    swf: 'xxxx/libs/webuploader/Uploader.swf',
    server: 'http://up.qiniu.com/',
    pick: '#xxxxx',
    resize: false,
    fileNumLimit: xxx,
    auto: true,
    formData: {
      token: {token 传入后台生成的Token} 
    }
  });

上传成功之后，七牛返回

Object {
    hash: "FtsE1LaEX5dqGOoY2l1sqGX62WMV", 
    key: "FtsE1LaEX5dqGOoY2l1sqGX62WMV",
    _raw: '{
        "hash":"FtsE1LaEX5dqGOoY2l1sqGX62WMV",
         "key":"FtsE1LaEX5dqGOoY2l1sqGX62WMV"
    }
}

如此

你在七牛建立的指定空间的默认地址 + 返回的 hash 值，即为你上传到七牛的路径

举例：

最后

这只是一个最简单的例子，里面有很多的玩法，前端和后端都是，看你怎么玩了